<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018-03-05
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>积分管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="/static/plugins/datepicker/datepicker3.css">


</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a href="/user/home" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">积分</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <li class="dropdown messages-menu">
                        <!-- Menu toggle button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-success">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">您有4条信息待处理</li>
                            <li class="footer"><a href="#">查看所有信息</a></li>
                        </ul>
                    </li>
                    <!-- /.messages-menu -->
                    <!-- User Account Menu -->
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="" class="user-image user_head_img" alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs user_name"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-right">
                                    <a href="/user/logout" class="btn btn-default btn-flat">退出系统</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar user panel (optional) -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="" class="img-circle  user_head_img" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p class="user_name"></p>
                    <!-- Status -->
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <!-- Optionally, you can add icons to the links -->
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i> <span>员工管理</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/user/allUser">人员管理</a></li>
                        <li><a href="/mission">所有任务</a></li>
                        <li><a href="/Integral">积分模板</a></li>
                        </require><li><a href="">保留</a></li>
                        <li><a href="">保留</a></li>
                        <li><a href="">保留</a></li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                员工管理
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">

            <div class="box">

                <!-- /.box-header -->
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="attend_grid" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>userId</th>
                            <th>用户名</th>
                            <th>手机</th>
                            <th>部门</th>
                            <th>职位</th>
                            <th>工号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div id="grid_pager"></div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- 模态框示例（Modal） -->
    <form method="post" action="/reAttend/start" class="form-horizontal" role="form" id="fota"  style="margin: 20px;">
        <div class="modal fade" id="reAttendModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            用户信息
                        </h4>
                    </div>
                    <div class="modal-body">

                            <div class="col-sm-9">
                                <%--<input type="hidden" class="form-control" name="id" value="" id="edit_id">--%>
                            </div>

                            <div class="col-sm-9">
                                <input type="hidden" name="id" value="" id="edit_id">
                            </div>
                        <input type="hidden" name="car_type" value="" id="car_type_val" /><br/>
                        <select multiple="multiple" style="min-width:200px; min-height:80px;" id="biaoqian">
                        </select>&nbsp;
                        <select multiple="multiple" style="min-width:200px; min-height:80px;" id="labelList">
                        </select>
                            </div>
                    <input id="label" class="form-control" placeholder="创建新标签" type="text"><button type="button" class="btn btn-primary" onclick="return jiabiaoqian()">添加</button>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>

                        <button type="button" class="btn btn-primary" onclick="return mu()" >
                            提交
                        </button><span id="tip"> </span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
    </form>
    <!-- Main Footer -->
    <footer class="main-footer">
        <strong>Copyright &copy; 2016 <a href="#">落叶</a>.</strong> All rights reserved.
    </footer>

</div>

<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="/static/jquery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/app.min.js"></script>
<script src="/static/js/mui.min.js"></script>
<script src="/static/js/user.js"></script>
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="/static/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/static/plugins/daterangepicker/moment.min.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script>
    //    function reAttend(data) {
    //        alert(data.id+"  "+data.attendDate);
    //        var attendId=data.id;
    //        alert(attendId);
    //
    //    }


</script>
<script>

    $(function(){
        $("#labelList").dblclick(function(){
            var s_val = this.value;
            if(s_val == '') return;

            var count = $("#biaoqian").find('option').length;
            for(var i=0;i<count;i++)
            {
                if($("#biaoqian").get(0).options[i].value == s_val)
                {
                    return;
                }
            }

            $(this).children("option[value='"+s_val+"']").remove();
            $("#biaoqian").append('<option value="'+s_val+'">'+s_val+'</option>');
            //以下代码作用是 将选择到的值备份到一个id为car_type_val的input中，可以进行传值
            $("#car_type_val").val($("#car_type_val").val()+s_val+",");
        });

        $("#biaoqian").dblclick(function(){
            var s_val = this.value;
            if(s_val == '') return;
            var id = document.getElementById("edit_id");
            var count = $("#labelList").find('option').length;
            for(var i=0;i<count;i++)
            {
                if($("#labelList").get(0).options[i].value == s_val)
                {
                   mui.ajax({
                       url:'deleteLabel',
                       data: {"labelName":s_val,"id":id.value},
                       dataType: 'json',
                       headers:{'Content-Type':'application/json'},
                       type: 'post',
                       success: function(data) {
                           alert("删除成功！");
                       },
                       error: function(xhr, type, errorThrown) {
                           alert("失败！");
                       }
                   });
                    break;
                }
            }

            $(this).children("option[value='"+s_val+"']").remove();
            $("#labelList").append('<option value="'+s_val+'">'+s_val+'</option>');
            var now_val = $("#car_type_val").val();
            now_val = now_val.replace(s_val+",","");
            $("#car_type_val").val(now_val);
        });

    })


    function jiabiaoqian() {
        var label = document.getElementById("label");
        var labelList = document.getElementById("labelList");
        if(label.value==""){
            alert("请输入标签");
            return;
        }
        var count = $("#labelList").find('option').length;
        for(var i=0;i<count;i++)
        {
            if($("#labelList").get(0).options[i].value == label.value)
            {
                alert("标签重复！");
                return;
            }
        }

        var table2  = document.getElementById("labelList");
        var option = document.createElement('option');
        option.setAttribute("value",label.value);
        option.innerHTML = label.value;
        table2.appendChild(option);
        mui.ajax({
            url:'/user/insertLabel',
            data: {"labelName":label.value},
            dataType: 'json',
            headers:{'Content-Type':'application/json'},
            type: 'post',
            success: function(data) {
                alert("添加成功！");
            },
            error: function(xhr, type, errorThrown) {
                alert("失败！");
            }

        });
        label.value = "";
    }
    
    
    var shuju = [];
    function labeluser(data) {
        var  id   = data.id;
        $("#edit_id").val(data.id);
       mui.ajax({
            url:'/user/wuserinfo',
           datatype:'json',
           type:'post',
           data:{"id":id,"CID":"asdasd"},
            success:function (data) {
               document.getElementById("car_type_val").value = "";
                shuju = JSON.parse(data);
                var table2  = document.getElementById("labelList");
                table2.innerHTML = "";
                for(var i =0; i<(shuju.data2.length);i++) {
                    var option = document.createElement('option');
                    option.setAttribute("id",shuju.data2[i].labelId);
                    option.setAttribute("value",shuju.data2[i].labelName);
                    option.innerHTML = shuju.data2[i].labelName;
                    table2.appendChild(option);
                }
                try{
                    var table = document.getElementById("biaoqian");
                    table.innerHTML = "";
                    for(var i =0;i<shuju.data.listLabel.length;i++) {
                        var span = document.createElement('option');
                        span.setAttribute("value",shuju.data.listLabel[i].labelName);
                        span.innerHTML = shuju.data.listLabel[i].labelName;
                        table.appendChild(span);
                    }
                }catch(e) {
                    var table = document.getElementById("biaoqian");
                    table.innerHTML = "";
                }



            }
        });
        $("#reAttendModal").modal('show');
    }
    //Date range as a button

    function formToJson(form) {
        var result = {};
        var fieldArray = $('#' + form).serializeArray();
        for (var i = 0; i < fieldArray.length; i++) {
            var field = fieldArray[i];
            if (field.name in result) {
                result[field.name] += ',' + field.value;
            } else {
                result[field.name] = field.value;
            }
        }
        return result;
    }

    //Date picker
    $('#attendDate').datepicker({
        autoclose: true,
        language: 'zh-CN',
        todayHighlight: true
    });
    function reAttend(data) {
        $("#edit_id").val(data.id);
        $.ajax({
            type:"POST",
            url:"/user/wuserinfo",
            data:{"id":edit_id},
            success:function (data) {
                console.log(data);
            }
        });

    }


    function mu() {
        if($("#car_type_val").val()==""){
            return;
        }
        var id = document.getElementById("edit_id");
        mui.ajax({
            url:'/user/updateLabelUser',
            data: {"labelName":$("#car_type_val").val(),"id":id.value},
            dataType: 'json',
            headers:{'Content-Type':'application/json'},
            type: 'post',
            success: function(data) {
                alert("修改成功！");
                $("#reAttendModal").modal('hide');
            },
            error: function(xhr, type, errorThrown) {
                alert("失败！");
            }
        })
    }


    var table;

    function attendQuery() {
        table.ajax.reload();
    }
    $(function () {
        //提示信息
        $.fn.dataTable.ext.errMode = 'none';

        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        //初始化表格
        table = $("#attend_grid")
            .on('error.dt', function (e, settings, techNote, message) {
                console.warn(message)
            }).dataTable({
                language: lang, //提示信息
                autoWidth: false, //禁用自动调整列宽
                stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
                processing: true, //隐藏加载提示,自行处理
                serverSide: true, //启用服务器端分页
                searching: false, //禁用原生搜索
                orderMulti: false, //启用多列排序
                order: [], //取消默认排序查询,否则复选框一列会出现小箭头
                renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
                pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
                columnDefs: [{
                    "targets": 'nosort', //列的样式名
                    "orderable": false //包含上样式名‘nosort'的禁止排序
                }],
                ajax: function (data, callback, settings) {
                    //封装请求参数
                    var param = formToJson("attendQueryForm");
                    param.pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.currentPage = (data.start / data.length) + 1;//当前页码
                    //console.log(param);
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "/user/all",
                        cache: false, //禁用缓存
                        data: param, //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            console.log(result);
//                            console.log(result);
                            //setTimeout仅为测试延迟效果
                            setTimeout(function () {
                                //封装返回数据
                                var returnData = {};
                                returnData.draw = data.startRow;//这里直接自行返回了draw计数器,应该由后台返回
                                returnData.recordsTotal = result.totalRows;//返回数据全部记录
                                returnData.recordsFiltered = result.totalRows;//后台不实现过滤功能，每次查询均视作全部结果
                                returnData.data = result.items;//返回的数据列表

                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(returnData);
                            }, 200);
                        }
                    });
                },
                //列表表头字段
                columns: [
                    {   "data": "seq",
                        render: function (data, type, full,row_col) {
                            return row_col.row;
                        }
                    },
                    {"data": "userId" , "visible" : false },
                    {"data":"username",
                    }
                    ,
                    {"data":"mobile"}
                    ,
                    {"data":"department"}
                    ,
                    {"data":"position"}
                    ,
                    {"data":"jobNumber"}
                    ,
                    {
                        "data": "操作列",
                        render: function (data, type, full) {

                              return   '<button type="button" class="btn btn-info"  onclick="return labeluser('+JSON.stringify(full).replace(/\"/g,"'")+')" >编辑</button>'

                        }
                    }
                ]
            })
            .api();


        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
    });

</script>

</body>
</html>
